<template>
    <div class="newProduct">
        <h3>周一周四·新品首发</h3>
        <ul>
            <li v-for="item in newGoodsList" :key="item.id" @click="btn(item.id)">
                <img v-lazy="item.list_pic_url" alt="">
                <p>{{item.name}}</p>
                <span>{{item.retail_price|Price}}</span>
            </li>
        </ul>

    </div>
</template>

<script>
export default {
    name: 'VueNewproduct',

    data() {
        return {
            
        };
    },
    props:['newGoodsList'],

    mounted() {
        
    },

    methods: {
         btn(id){
        console.log(id)
        this.$router.push({path:'/detail',query:{id}})
      }
    },
};
</script>

<style lang="less" scoped>
.newProduct{
    h3{
        text-align: center;
        margin: 10px 0;
    }
    ul{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    
    li{
        width: 50%;
        text-align: center;
        p{
        font-size: 16px;
        }
        img{
        width: 100%;
        }
         span{
        font-size: 16px;
        text-align: center;
        color: rgb(136, 39, 39);
        }
   

    }
}
}

</style>